<template>
  <div class="group">
    <div class="title" v-if="title">{{title}}</div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Group',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  .group {
    /*padding: 8px 18px;*/
    margin: 0 18px 18px;
    border-radius: 8px;
    background: @color-base;
    .title {
      padding: 12px 0 12px 12px;
      border-bottom: 1px solid @color-background;
      font-size: @font-size-medium;
      color: @color-text-l;
      text-align: left;
    }
  }
</style>
